<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-tabs v-model="activeName">
        <el-tab-pane label="待接单" name="first">
          <el-button @click="changeVisual()">切换员工视角</el-button>
          <el-form
            v-if="visual === 'leader'"
            :model="ruleForm"
            :rules="rules"
            inline
            label-width="auto"
            status-icon
            class="py-4"
          >
            <el-form-item prop="username" v-for="(item, index) in s33" :key="index" :label="item">
              <el-input placeholder="请输入" />
            </el-form-item>
            <el-form-item label="线路" prop="name">
              <el-input model-value="一号线" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="方向" prop="name">
              <el-input model-value="东向" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="线路车辆">
              一号车、二号车、三号车
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search">查询</el-button>
              <el-button :icon="Refresh">重置</el-button>
            </el-form-item>
          </el-form>
          <div v-if="visual === 'member'" class="py-4">
            <span class="mr-5">1号线、东向、02叉车</span>
            <el-button type="primary">反向</el-button>
            <el-button type="success">开始</el-button>
            <el-button type="primary">完成</el-button>
            <el-button type="danger">收车</el-button>
          </div>
          <div class="mb-3">
            <el-button type="primary">导入站点</el-button>
            <el-button type="primary">导出站点</el-button>
          </div>
          <el-table :data="tableData">
            <!-- <el-table-column type="selection" width="50" align="center" /> -->
            <el-table-column type="index" label="序" width="50" />
            <el-table-column label="站点" prop="label" />
            <el-table-column label="发货数">
              <template #default="item">
                <div class="flex">
                  <div class="mr-2">{{ item.row.num }} 单</div>
                  <div v-for="(v, i) in item.row.num" :key="i">
                    <el-icon color="red" class="mr-2"><Box /></el-icon>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="到货数">
              <template #default="item">
                <div class="flex">
                  <div class="mr-2">{{ item.row.xi }} 单</div>
                  <div v-for="(v, i) in item.row.xi" :key="i">
                    <el-icon class="mr-2" style="color: rgb(34 197 94)"><Box /></el-icon>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" text bg size="small" @click="goto('/labels/site')"
                >查看</el-button
              >
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已接单" name="first2">
          <el-form
            v-if="visual === 'leader'"
            :model="ruleForm"
            :rules="rules"
            inline
            label-width="auto"
            status-icon
            class="py-4"
          >
            <el-form-item prop="username" v-for="(item, index) in s3" :key="index" :label="item">
              <el-input placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search">查询</el-button>
              <el-button :icon="Refresh">重置</el-button>
            </el-form-item>
            <!-- <el-form-item label="线路">
              <el-input model-value="" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="车辆">
              <el-input model-value="" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="方向">
              <el-input model-value="" placeholder="请选择" />
            </el-form-item> -->
          </el-form>
          <el-table :data="tableData3">
            <!-- <el-table-column type="selection" width="50" align="center" /> -->
            <el-table-column type="index" label="序" width="50" />
            <el-table-column label="订单编号" prop="" width="100">
              ZY-100003
            </el-table-column>
            <el-table-column label="产品工号" prop="" width="100">
              10100002
            </el-table-column>
            <el-table-column label="产品名称" prop="label3" />
            <el-table-column label="物料名称">
              大梁
            </el-table-column>
            <el-table-column label="机号">
              1-3#
            </el-table-column>
            <el-table-column label="发货地址" prop="label" />
            <el-table-column label="收货地址" prop="label1" width="100" />
            <el-table-column label="申请人" prop="label2" />
            <el-table-column label="申请人电话" prop="label6" width="120" />
            <el-table-column label="收货人" prop="label2" />
            <el-table-column label="收货人电话" prop="label6" width="120" />
            <el-table-column label="物料照片">
              <img class="w-3/6" src="/dabao.png" alt="" />
            </el-table-column>
            <!-- <el-table-column label="工号" prop="label4" /> -->
            <el-table-column label="下单时间" prop="label5" width="120" />
            <el-table-column label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.type" size="small">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <!-- <el-button type="primary" text bg size="small">{{
                  scope.row.operationBtn
                }}</el-button> -->
                <el-button type="primary" text bg size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="first3">
          <el-form
            v-if="visual === 'leader'"
            :model="ruleForm"
            :rules="rules"
            inline
            label-width="auto"
            status-icon
            class="py-4"
          >
            <el-form-item prop="username" v-for="(item, index) in s3" :key="index" :label="item">
              <el-input placeholder="请输入" />
            </el-form-item>
            <el-form-item label="完成时间">
              <el-input model-value="" placeholder="请选择" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search">查询</el-button>
              <el-button :icon="Refresh">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData3">
            <!-- <el-table-column type="selection" width="50" align="center" /> -->
            <el-table-column type="index" label="序" width="50" />
            <el-table-column label="发货地址" prop="label" />
            <el-table-column label="收货地址" prop="label1" />
            <el-table-column label="申请人" prop="label2" />
            <el-table-column label="申请人电话" prop="label6" />
            <el-table-column label="收货人" prop="label2" />
            <el-table-column label="收货人电话" prop="label6" />
            <el-table-column label="物料照片">
              <img class="w-3/6" src="/dabao.png" alt="" />
            </el-table-column>
            <el-table-column label="名称" prop="label3" />
            <!-- <el-table-column label="工号" prop="label4" /> -->
            <el-table-column label="下单时间" prop="label5" />
            <el-table-column label="状态">
              <template #default="scope">
                <el-tag type="success" size="small">已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" text bg size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- <el-tab-pane label="在线人员" name="first5">
        </el-tab-pane> -->
        <el-tab-pane label="车辆人员分配" name="first4" class="flex">
          <div class="w-2/6">
            <h3>在线人员</h3>
            <Line />
          </div>
          <!-- <el-divider direction="vertical" style="height: 100vh;" /> -->
          <div class="bg-slate-100 w-3"></div>
          <div class="w-4/6 pl-5">
            <el-form
              :model="ruleForm"
              :rules="rules"
              inline
              label-width="auto"
              status-icon
              style="max-width: 920px"
              class="py-4"
            >
              <!-- <el-form-item label="线路">
                <el-input v-model="ruleForm.name" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="车辆人员">
                <el-input v-model="ruleForm.name" placeholder="请选择" />
              </el-form-item> -->
              <el-button type="primary" class="float-right mb-2" @click="dialogVisible = true">新建车辆分配</el-button>
            </el-form>
            <el-table :data="tableData2">
              <el-table-column prop="number" label="车辆组合" width="100" />
              <el-table-column label="详细信息" min-width="200">
                <div class="flex items-center">
                  <div class="text-center">
                    <div>牵引头01</div>
                    <img src="/qyt.png" alt="" class="h-16" />
                  </div>
                  <div>+</div>
                  <div class="text-center">
                    <div>叉车01</div>
                    <img src="/x.png" alt="" class="h-16" />
                  </div>
                  <div>+</div>
                  <div class="flex">
                    <div class="text-center">
                      <div>王明</div>
                      <div class="h-16 flex items-center">
                        <img src="/touxiang1.svg" alt="" class="h-10 \" />
                      </div>
                    </div>
                    <div class="text-center">
                      <div>李建</div>
                      <div class="h-16 flex items-center">
                        <img src="/touxiang1.svg" alt="" class="h-10 \" />
                      </div>
                    </div>
                  </div>
                </div>
              </el-table-column>
              <el-table-column label="车辆人员">
                <div><span class="w-10 inline-block">王明</span>16789988888 板车</div>
                <div><span class="w-10 inline-block">李建</span>15058868666 叉车</div>
              </el-table-column>
              <el-table-column label="线路" prop="label" width="90px" />
              <!-- <el-table-column label="工作时间" prop="time" width="90px" /> -->
              <el-table-column label="操作">
                <el-button type="primary" text bg size="small" @click="dialogVisible = true"
                  >修改</el-button
                >
                <el-button type="danger" text bg size="small">删除</el-button>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog v-model="dialogVisible" title="编辑车辆" width="30%">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="auto"
        label-position="left"
      >
        <el-form-item prop="username" label="车辆名称">
          <el-input v-model="formData.username" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="password" label="牵引头">
          <el-input v-model="formData.password" placeholder="请选择" />
        </el-form-item>
        <el-form-item prop="username" label="叉车">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <el-form-item prop="username" label="板车人员">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <el-form-item prop="username" label="叉车人员">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <el-form-item prop="username" label="线路">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading"
            >确认</el-button
          >
        </template>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi } from "@/api/table"
import { type CreateOrUpdateTableRequestData, type GetTableData } from "@/api/table/types/table"
import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
import { Search, Refresh, CirclePlus, Delete, Upload, RefreshRight, Edit } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import site from "./site.vue";
import Line from './line.vue'

const s33 = [
  '订单编号',
  '产品工号',
  '产品名称',
  '物料名称',
  '机号',
  '发货部门',
  '电话',
]
const s3 = [
  '订单编号',
  '产品工号',
  '产品名称',
  '物料名称',
  '机号',
  '状态',
  '配送人',
  '发货部门',
  '电话',
  '线路',
  '车辆',
  '方向',
]
const s4 = [
  '订单编号',
  '产品工号',
  '产品名称',
  '物料名称',
  '机号',
  '状态',
  '配送人',
  '发货部门',
  '电话',
]
const activeName = ref("first4");
const ruleForm = reactive({
  name: "",
});
const rules = reactive({
  name: [{ required: true, message: "请输入", trigger: "blur" }],
});
import { useRouter } from "vue-router";
const router = useRouter();
function goto(params) {
  router.push(params);
}
const visual = ref("leader");
const changeVisual = () => {
  if (visual.value === "leader") {
    visual.value = "member";
  } else {
    visual.value = "leader";
  }
};
const dialogVisible = ref(false);
const formRef = ref<FormInstance | null>(null)
const formData = ref([])
const formRules: FormRules<CreateOrUpdateTableRequestData> = {
  username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }]
}
const two = [
  { label: "钢二西中", num: 3, xi: 2 },
  { label: "钢二东", num: 2, xi: 2 },
  { label: "钢二西北", num: 3, xi: 2 },
  { label: "综合组", num: 3, xi: 2 },
  { label: "大通二东门", num: 5, xi: 2 },
  { label: "大通冷加工", num: 3, xi: 2 },
  { label: "大通二西北", num: 3, xi: 2 },
  { label: "大通二西南", num: 8, xi: 2 },
  { label: "大通一东门", num: 3, xi: 2 },
  { label: "五金仓库", num: 3, xi: 2 },
  { label: "钢三堆场", num: 6, xi: 2 },
  { label: "老钢四西", num: 3, xi: 2 },
  { label: "钢二西南", num: 3, xi: 2 },
];
const tableData = two;
const tableData2 = [
  {
    number: "1号车",
    label: "1号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
    time: "东向-2024-06-03 17:08:56",
  },
  {
    number: "2号车",
    label: "1号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
  },
  {
    number: "3号车",
    label: "1号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
  },
  {
    number: "4号车",
    label: "1号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
  },
  {
    number: "5号车",
    label: "1号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
  },
  {
    number: "6号车",
    label: "2号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
  },
  {
    number: "7号车",
    label: "2号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
  },
  {
    number: "8号车",
    label: "2号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
  },
  {
    number: "9号车",
    label: "2号线",
    label1: "王明",
    label2: "起运383",
    label3: "13789878909",
  },
];
const tableData3 = [
  {
    label: "钢二西中",
    label1: "大通冷加工",
    label2: "张三",
    label3: "巴基斯坦",
    label4: "5899696",
    label5: "2024-04-01 14:27:13",
    label6: "18843598886",
    status: "待取货",
    type:'warning',
    operationBtn: "已取货",
  },
  {
    label: "钢二西中",
    label1: "大通冷加工",
    label2: "张三",
    label3: "巴基斯坦",
    label4: "5899696",
    label5: "2024-04-01 14:27:13",
    label6: "18843598886",
    status: "待取货",
    type:'warning',
    operationBtn: "已取货",
  },
  {
    label: "钢二西中",
    label1: "大通冷加工",
    label2: "张三",
    label3: "巴基斯坦",
    label4: "5899696",
    label5: "2024-04-01 14:27:13",
    label6: "18843598886",
    status: "配送中",
    type:'success',
    operationBtn: "配送完成",
  },
];
</script>
<style lang="scss" scoped>
// cursor: pointer;
</style>
